import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import { withRouter } from 'react-router'
import AppBar from 'material-ui/AppBar';
import './App.css';

import FlatButton from 'material-ui/FlatButton';
import Snackbar from 'material-ui/Snackbar';
import FontIcon from 'material-ui/FontIcon';
import { BottomNavigation, BottomNavigationItem } from 'material-ui/BottomNavigation';
import Paper from 'material-ui/Paper';
import dateFormat  from 'dateformat';
import Judge from './pages/Judge';
import Print from './pages/Print';

import AddJudgeDialog from './components/AddJudgeDialog';

import Home from './pages/Home';
import Tools from './pages/Tools';
import Standard from './pages/Standard';

import JudgeLocalStorage from './config/JudgeLocalStorage';

const HomeIcon = <FontIcon className="material-icons">工作台</FontIcon>;
// const StandardIcon = <FontIcon className="material-icons">考核标准</FontIcon>;
const ToolsIcon = <FontIcon className="material-icons">考核工具</FontIcon>;
const styles = {
  AppBar: {
    position: "fixed",
    zIndex: "1000",
    width: "100%",
    top: 0
  }, appContent: {
    marginTop: '100px',
    marginBottom: '150px'
  }, BottomMenuStyle: {
    position: "fixed",
    zIndex: "1000",
    width: "100%",
    "bottom": 0

  }
};


class App extends Component {
  constructor(props) {
    super(props);


    // const JudgeProjects = { ...JudgeLocalStorage.getItem("projects") };

    this.state = {
      showAddJudgeDialog: false,
      bottomSelectedIndex: 0,
      JudgeProjects: {},
      popDate: {
        open: false,
        message: ""
      }
    };
    this.timer = undefined;
  }

  componentWillMount() {
    const JudgeProjects = { ...JudgeLocalStorage.getItem("projects") };
    if (JudgeProjects) {
      this.setState({
        JudgeProjects: JudgeProjects
      });
    }

  }

  _toggleAddJudge = () => {
    this.setState({ showAddJudgeDialog: !this.state.showAddJudgeDialog })
  };
  /**
   * 添加考核
   * @param judgeData
   */
  addJudge = (judgeData) => {
    const timeStamp = Date.now();

    const projects = { ...this.state.JudgeProjects };
    console.log("添加前", projects);


    let createTime = new Date();
    createTime = dateFormat(createTime, 'yyyy-mm-dd');
    judgeData.createTime = createTime;

    projects[`project-${timeStamp}`] = judgeData;

    JudgeLocalStorage.setItem("projects", projects);
    // localStorage.setItem("projects", JSON.stringify(projects));

    // console.log("添加后", JudgeLocalStorage.getItem("projects"));

    this._toggleAddJudge();
    this.setState({ JudgeProjects: projects, bottomSelectedIndex: 0 })
  };


  deleteJudge = (projectId) => {
    const projects = { ...this.state.JudgeProjects };
    delete projects[projectId];

    JudgeLocalStorage.setItem("projects", projects);
    this.setState({
      JudgeProjects: projects
    })

  };
  //清楚弹出框的timeout
  componentWillUnMount() {
    clearTimeout(this.timer);
  }

  _handleClosePop = () => {
    this.setState({
      popDate: {
        open: false
      }
    })
  };

  __handleShowPop = (message) => {
    this.setState({
      popDate: {
        open: true,
        message: message
      }
    });

    this.timer = setTimeout(() => {
      this.setState({
        popDate: {
          open: false,
          message: ""
        }
      })
    }, 2000)
  };
  _BottomMenuSelect = (index) => {

    const { history } = this.props;
    let location = { pathname: '/' };
    if (index === 0)
      location.pathname = '/';
    if (index === 1)
      location.pathname = '/standard';
    if (index === 2)
      location.pathname = '/tools';
    history.push(location);

    this.setState({ bottomSelectedIndex: index })
  };

  render() {
    const routes = [
      {
        path: '/',
        exact: true,
        main: () => <Home deleteJudgeProject={this.deleteJudge} JudgeProjects={this.state.JudgeProjects}/>
      },
      {
        path: '/tools',
        main: () => <Tools/>
      },
      {
        path: '/standard',
        main: () => <Standard/>
      },
      {
        path: '/judge',
        main: () => <Judge/>
      },
    ];

    return (

      <div>
        <Route exact path="/print" component={Print}/>
        {this.props.location.pathname === '/print' ? null :
          <div id="app" className="app">
            <div style={styles.AppBar}>
              <AppBar style={{ backgroundColor: '#3e78c1' }}
                      title="考核宝"
                      iconElementLeft={<span/>}
                      iconElementRight={<div>
                        <FlatButton label="新增考核" labelStyle={{ color: "#fff" }} onClick={this._toggleAddJudge}/></div>}
              /></div>
            <div style={styles.appContent}>
              {routes.map((route, index) => (
                // Render more <Route>s with the same paths as
                // above, but different components this time.
                <Route
                  key={index}
                  path={route.path}
                  exact={route.exact}
                  component={route.main}
                />
              ))}
            </div>
            <div style={styles.BottomMenuStyle}>
              <Paper zDepth={2}>
                <BottomNavigation selectedIndex={this.state.bottomSelectedIndex}>
                  <BottomNavigationItem
                    icon={HomeIcon}
                    onClick={() => this._BottomMenuSelect(0)}
                  />
                  {/*<BottomNavigationItem*/}
                  {/*icon={StandardIcon}*/}
                  {/*onClick={() => this._BottomMenuSelect(1)}*/}
                  {/*/>*/}
                  <BottomNavigationItem
                    icon={ToolsIcon}
                    onClick={() => this._BottomMenuSelect(2)}
                  />
                </BottomNavigation>
              </Paper>
            </div>
          </div>
        }
        <AddJudgeDialog open={this.state.showAddJudgeDialog} addJudge={this.addJudge}
                        toggleShow={this._toggleAddJudge}
                        handlePop={this.__handleShowPop}/>


        <Snackbar
          open={this.state.popDate.open}
          message={this.state.popDate.message}

          onRequestClose={this._handleClosePop}
        />
      </div>

    );
  }
}

export default withRouter(App);
